<template>
  <el-card shadow="hover" header="实时收入" v-loading="loading">
    <scEcharts ref="c1" height="300px" :option="option"></scEcharts>
  </el-card>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const scEcharts = defineAsyncComponent(() => import('@/components/scEcharts/scEcharts.vue'))

const loading = ref(true);
const option = ref<echarts.EChartsCoreOption>({
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    boundaryGap: false,
    type: 'category',
    data: (function () {
      let now = new Date();
      const res = [];
      let len = 30;
      while (len--) {
        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
        now = new Date(now - 2000);
      }
      return res;
    })(),
  },
  yAxis: [
    {
      type: 'value',
      name: '价格',
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '收入',
      type: 'line',
      symbol: 'none',
      lineStyle: {
        width: 1,
        color: '#409EFF',
      },
      areaStyle: {
        opacity: 0.1,
        color: '#79bbff',
      },
      data: (function () {
        const res = [];
        let len = 30;
        while (len--) {
          res.push(Math.round(Math.random() * 0));
        }
        return res;
      })(),
    },
  ],
})

setTimeout(function () {
  loading.value = false;
}, 500);


onMounted(() => {
  setInterval(function () {
    const o = option.value;

    o.series[0].data.shift();
    o.series[0].data.push(Math.round(Math.random() * 100));

    o.xAxis.data.shift();
    o.xAxis.data.push(new Date().toLocaleTimeString().replace(/^\D*/, ''));
  }, 2100);
})
</script>

<style scoped></style>
